import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { message, DatePicker, Radio } from 'antd';
import React, { useState, useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import ListofDetails from './components/ListofDetail';
import UpdateForm from './components/UpdateForm';
import { queryoversaleTable, updateRule, addRule, removeRule } from './service';
import moment from 'moment';
/**
 * 添加节点
 * @param fields
 */
const handleAdd = async fields => {
  const hide = message.loading('正在添加');

  try {
    await addRule({
      desc: fields.desc,
    });
    hide();
    message.success('添加成功');
    return true;
  } catch (error) {
    hide();
    message.error('添加失败请重试！');
    return false;
  }
};
/**
 * 更新节点
 * @param fields
 */

const handleUpdate = async fields => {
  const hide = message.loading('正在配置');

  try {
    await updateRule({
      name: fields.name,
      desc: fields.desc,
      key: fields.key,
    });
    hide();
    message.success('配置成功');
    return true;
  } catch (error) {
    hide();
    message.error('配置失败请重试！');
    return false;
  }
};
/**
 *  删除节点
 * @param selectedRows
 */

const handleRemove = async selectedRows => {
  const hide = message.loading('正在删除');
  if (!selectedRows) return true;

  try {
    await removeRule({
      key: selectedRows.map(row => row.key),
    });
    hide();
    message.success('删除成功,即将刷新');
    return true;
  } catch (error) {
    hide();
    message.error('删除失败,请重试');
    return false;
  }
};

const TableList = () => {
  const [createModalVisible, handleModalVisible] = useState(false);
  const [updateModalVisible, handleUpdateModalVisible] = useState(false);
  const actionRef = useRef();
  const columns = [
    {
      title: '旅客状态',
      key: 'flightStatus',
      dataIndex: 'flightStatus',
      hideInSearch: true,
      fixed: 'left',
      width: 120,
      valueEnum: {
        0: '计划',
        1: '起飞',
        2: '降落',
        3: '补班',
        4: '备降',
        5: '返航',
        6: '延误',
        7: '取消'
      },
    },
    {
      title: '航班日期',
      dataIndex: 'updatedAt',
      fixed: 'left',
      width: 120,
      // sorter: true,
      renderFormItem: (item, { onChange, value, ...rest }) => {
        const format = 'YYYY/MM/DD';
        return (
          <DatePicker.RangePicker
            defaultValue={[
              moment(new Date(), format).subtract(30, 'days'),
              moment(new Date(), format),
            ]}
            format={format}
            value={value ? value.split('-').map(m => moment(m, format)) : ''}
            onChange={range => onChange(range.map(m => m.format(format)).join('-'))}
            {...rest}
            {...item.renderFormItem}
          />
        );
      },
    },
    {
      title: '航班号',
      dataIndex: 'flight',
      fixed: 'left',
      width: 100,
    },
    {
      title: '航段',
      hideInSearch: true,
      dataIndex: 'bookSeat',
      width: 80
    },
    {
      title: '计划起飞/计划到达',
      hideInSearch: true,
      dataIndex: 'cc',
      width: 150
    },
    {
      title: '旅客姓名',//模糊查询
      dataIndex: 'd',
      width: 100
    },
    {
      title: '旅客票号',
      dataIndex: 'a',
      width: 100
    },
    {
      title: 'PNR',
      dataIndex: 'st',
      width: 120
    },
    {
      title: '舱位',//下拉多选
      key: 'flightaaType',
      dataIndex: 'flightaaType',
      width: 100,
      valueEnum: {
        0: '全部',
        1: '国内',
        2: '国际'
      },
    },
    {
      title: '值机状态',//下拉多选
      key: 'flightType',
      dataIndex: 'flightType',
      width: 120,
      valueEnum: {
        0: '全部',
        1: '国内',
        2: '国际'
      },
    },
    {
      title: '座位号',
      hideInSearch: true,
      dataIndex: 'stv',
      width: 100
    },
    {
      title: '行李号',
      hideInSearch: true,
      dataIndex: 's2d',
      width: 100
    },
    {
      title: '出发航站',
      dataIndex: 's3d',
      hideInTable: true,
      width: 100,
      valueEnum: {
        0: '全部',
        1: '国内',
        2: '国际'
      },
    },
    {
      title: '到达航站',
      dataIndex: 's4d',
      hideInTable: true,
      width: 100,
      valueEnum: {
        0: '全部',
        1: '国内',
        2: '国际'
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      width: 100,
      fixed: 'left',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a href="javascript:void(0)" onClick={() => handleModalVisible(true)}>
            旅客详情
          </a>
        </>
      ),
    },
  ];
  return (
    <PageHeaderWrapper>
      <ProTable
        headerTitle={
          <Radio.Group>
            <span style={{ paddingRight: 10, fontWeight: "bold", color: "#000" }}>全部航班列表</span>
          </Radio.Group>
        }
        actionRef={actionRef}
        rowKey="key"
        scroll={{ x: 1000 }}
        tableAlertRender={(selectedRowKeys, selectedRows) => (
          <div>
            已选择{' '}
            <a
              style={{
                fontWeight: 600,
              }}
            >
              {selectedRowKeys.length}
            </a>{' '}
            项&nbsp;&nbsp;
            <span>
              服务调用次数总计 {selectedRows.reduce((pre, item) => pre + item.callNo, 0)} 万
            </span>
          </div>
        )}
        request={params => queryoversaleTable(params)}
        columns={columns}
        rowSelection={{}}
      />
      <ListofDetails
        onSubmit={async value => {
          const success = await handleAdd(value);
          if (success) {
            handleModalVisible(false);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
        onCancel={() => handleModalVisible(false)}
        modalVisible={createModalVisible}
      />
    </PageHeaderWrapper>
  );
};

export default Form.create()(TableList);
